{% load static %}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>河南省华帝建设工程有限公司</title>
  <link rel="icon" href="{% static 'img/favicon.ico' %}" type="image/x-icon">
</head>

<body>
  <div>
    {% include 'navbar.html' %}
    <div class="top-contont">
      <div class="txt">
        <div class="ytable h100pc auto-inner">
          <div class="ytable-cell">
            <h2 class="wow fadeInRight animated" style="visibility: visible; animation-name: fadeInRight;">业绩中心</h2>
            <p class="wow fadeInRight animated" data-wow-delay="0.3s"
              style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInRight;">以质量求生存，以诚信谋发展</p>
          </div>
        </div>
      </div>
      <img src="{% static 'img/aboutda.jpg' %}" class="img-block pc" alt="关于我们">
      <img src="{% static 'img/aboutxiao.jpg' %}" class="img-block wap" alt="关于我们">
    </div>
    {% verbatim %}
    <div class="Content" id="app">
      <section class="auto-inner">
        <div class="news-info">
          <div class="title">
            <h2>{{ newsDetail.title }}</h2>
            <p><span>发布时间：{{ newsDetail.publish_date }}</span><span> 浏览次数：{{ newsDetail.view_count }} </span></p>
          </div>
          <div>
            <p style="text-align:center"><img  :src="newsDetail.cover_image_url" style="width: 600px; height: 400px;"></p>
            <article class="singlePage clearfix" v-html="newsDetail.content">
            </article>
          </div>


          <dl class="info-back-pn clearfix">
            <dd class="fl">
              <span class="dot" v-if="newsDetail.previous">
                <a :href="'/news/details?news_id=' + newsDetail.previous.id">上一条：{{ newsDetail.previous.title }}</a>
              </span>
              <span class="dot" v-if="newsDetail.next">
                <a :href="'/news/details?news_id=' + newsDetail.next.id">下一条：{{ newsDetail.next.title }}</a>
              </span>
            </dd>
            <dd class="fr"><a href="/news">返回列表</a></dd>
          </dl>
        </div>
      </section>
    </div>
    {% endverbatim %}
  </div>
  {% include 'footerbar.html' %}


  <script src="{% static 'vendor/axios/axios.min.js' %}"></script>
  <script src="{% static 'vendor/vue/vue-2.6.12.js' %}"></script>
  <script>
    function getQueryVariable(variable) {
      let query = decodeURI(window.location.search.substring(1));
      let vars = query.split("&");
      for (let i = 0; i < vars.length; i++) {
        let pair = vars[i].split("=");
        if (pair[0] === variable) { return pair[1]; }
      }
      return false;
    }

    var app = new Vue({
      el: '#app',
      data: {
        newsDetail: {},
      },
      methods: {
        getnewsDetail: function (news_id) {
          axios.get('/api/news/' + news_id + '/details/')
            .then(response => {
              this.newsDetail = response.data;
            })
            .catch(error => {
              console.error("There was an error fetching the news details:", error);
            });
        }
      },
      mounted() {
        let news_id = getQueryVariable("news_id");
        if (news_id) {
          this.getnewsDetail(news_id);
        }
      }
    });
  </script>

</body>

</html>